// 修改文章列表  编辑功能
// 通过laocat.search获取id
// console.log(location);
let form=layui.form
let layer =layui.layer
let id = location.search.split('?id=')[1]
// console.log(id);

    //  裁剪效果
    let $image= $('.container img');
        
        
    let options = {
            aspectRatio: 1,
            // 指定预览区域
            preview: ".preview",
    }
    //     // 裁剪区域
    // $image.cropper(options);


//  文本编辑器
const E = window.wangEditor
        const editor = new E("#contentBox")

     // 层级防止挡住下拉框
    editor.config.zIndex=500; 
    editor.create();


     // 选择图片上传按钮
$('#btnChooseCoverImage').on('click',function(){
    $('#fileCover').click()
});

// 更换图片裁切
$('#fileCover').on('change',function(){
    // 获取用户选项的图片的文件
    const file=this.files[0]
    // console.log(file)
    if (!file){
        return layer.msg('请选择图片');
    }
    // 将文件对象转换为地址
    let url = URL.createObjectURL(file);
    // 先销毁裁切区域
    $image.cropper('destroy').attr('src', url).cropper(options);
});


axios.get('/my/article/cates').then(({data:{data}})=>{
    let newArr = data.map(({Id,name})=>{
         return `<option value="${Id}">${name}</option>`;
     }).join('')
     $('[name=cate_id]').append(newArr)
    //  手动渲染更新
     form.render()
    //  文章详情
     axios.get('/my/article/' + id).then(({data:{status,data,message}})=>{
        form.val("form", data)
        editor.txt.html(data.content);
        

        // axios.defaults.baseURL = "http://api-breakingnews-web.itheima.net";
        let imgSrc= "http://api-breakingnews-web.itheima.net" + data.cover_img;
        $image.attr("src",imgSrc).cropper(options);
    })
 });


 let state
// 决定文章的状态发布或草稿
$('#btnPublish').on('click',function(){
    state= '已发布'
})
$('#btnSave').on('click',function(){
    state= '草稿'
})



 // 获取表单数据发送请求
$('#form').on('submit',function(e){
    e.preventDefault()
    let fd =new FormData(this)
    fd.append('content',editor.txt.html());
    // fd.forEach((value,name)=>{
    //     console.log(name,value)
    // })
    fd.append('state',state)
    fd.append('Id',id)
    // 处理封面
    $image
    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 400,
        height: 280
    })
    .toBlob(function(blob) {     
        fd.append('cover_img',blob); 
        // 提交请求p
        axios.post('/my/article/edit',fd).then(({data:{status}})=>{
            // console.log(res)
            if(status !==0){
                return layer.msg('修改失败')
            }
            // layer.msg('发布成功')
            // location.href='/article/art_list.html'
            layer.msg(
                '修改成功',
                {
                    time: 2000,
                },
                function (){
                    location.href = '/article/art_list.html';
                }
            );
        });
    	// 将 Canvas 画布上的内容，转化为文件对象
        // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
        // fd.forEach((value,name)=>console.log(value,name))
    })

   
}) 












